<style lang="less">

.tablePrint,
.tablePrint tr th,
.tablePrint tr td {
  padding: 5px 0;
  border: 2px solid #8a8e8e;
}

.tablePrint thead tr {
  font-weight: normal;
}

.tablePrint thead tr th {
  padding: 10px 0;
  font-weight: normal;
  color: #000;
}

.tablePrint {
  width: 840px;
  margin-top: 20px;
  text-align: center;
  border-collapse: collapse;
  padding: 2px;
  font-size: 14px;
}

.page {
  margin-top: 10px;
  margin-bottom: 20px;
  box-shadow: #cccccc 3px 3px 8px 0px;
  position: relative;
  left: 50%;
  margin-left: -130mm;
  box-sizing: border-box;
  padding: 15mm 8mm;
  width: 250mm;
  min-height: 297mm;
  background: #ffffff;
  font-size: 12px;
  color: #000000;
}

.debitTitle {
  margin-top: 10px;
  font-weight: normal;
  text-align: center;
  font-size: 25px;
}

.print-form-label-debit {
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
  line-height: 24px;
  text-align: right;
}

.print-form-left-label-debit {
  width: 100%;
  min-height: 24px;
  word-wrap: break-word;
  word-break: break-all;
  line-height: 24px;
  text-align: left;
}

.split-line-debit {
  margin: 5px 0px;
  height: 1px;
  border-bottom: solid 2px black;
}

.debit-line {
  left: 50%;
  width: 240px;
  margin-left: -120px;
  position: relative;
  height: 1px;
  border-bottom: solid 1px black;
}

.ivu-col-padding {
  padding-left: 10px;
  box-sizing: border-box;
}

.ivu-col-margin {
  margin-left: -15px;
}

.border-bottom-line-debit {
  border-bottom: solid 1px black;
  margin-left: 8px !important;
  padding-bottom: 2.5px;
  padding-top: 2.5px;
}

.footer {
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  margin-top: 150px;
  padding-left: 270px;
}

.input-border {
  outline: none;
}

.input-border .ivu-input {
  border: none;
  border-bottom: 1px solid #3b3b3b
}

.margin-left-5 {
  margin-left: 5px;
}

.input-border:focus {
  outline: 3px solid rgba(97, 205, 255, .5);
  -webkit-border-radius: 2px 2px;
  -moz-border-radius: 2px 2px;
  border-radius: 2px 2px;
}

.display-flex {
  display: flex;
  font-size: 14px;
  div {
    word-wrap: break-word;
    word-break: break-all;
  }
}
</style>
<template>
  <default-page-box style="width: 1000px">
    <template slot="content">
      <div id="printPage" v-show="false" style="width: 1000px">
        <div class="page">
          <div style="width: 230px;height: 180px;">
            <img :src="require('./logo.png')" style="max-height:100%; max-width:100%; height:auto; width:auto;" alt="logo"/>
          </div>
          <div style="height: auto;overflow:auto;text-align: center; font-size: 22px;font-family: 黑体;margin-top: -150px;margin-left: 50px">大迈六宝智慧冷链有限公司 库内分色回执单</div>
<!--          <div style="margin-left: 5px; margin-top: 40px" class="display-flex">-->
<!--            <div>客户名称：</div>-->
<!--            <div style="width: 340px;padding-top: 1px">{{ ownerName }}</div>-->
<!--            <div style="width: 180px;margin-left: 10px;text-align: center">中创智慧冷链有限公司</div>-->
<!--          </div>-->
          <div style="margin-left: 690px; margin-top: 20px;" class="display-flex">
            <div>分色单号：</div>
            <div style="width: 100px;padding-top: 1px">{{ orderNo }}</div>
          </div>
<!--          <div style="margin-left: 5px; margin-top: 20px" class="display-flex">-->
<!--            <div>客服联系电话：</div>-->
<!--            <div style="width: 560px;padding-top: 1px">{{ tel }}</div>-->
<!--          </div>-->
          <table class="tablePrint" style="margin-left: 5px">
            <thead>
            <tr>
              <th width="50" colspan="1">客户名称</th>
              <th colspan="8" style="text-align: left">{{ ownerName }}</th>
            </tr>
            <tr>
              <th width="80">序号</th>
              <th width="150">原品名</th>
              <th width="130">箱号</th>
              <th width="150">分色品名</th>
              <th width="70">国别</th>
              <th width="120">计划件数(件)</th>
              <th width="120">实际件数(件)</th>
              <th width="120">计划重量(KG)</th>
              <th width="120">实际重量(KG)</th>
            </tr>
            </thead>
            <tbody v-for="(item, index) in data" :key="index">
            <tr>
              <td width="80">{{ item.id }}</td>
              <td width="150">{{ item.orgMatName }}</td>
              <td width="130">{{ item.batchAttr07 }}</td>
              <td width="150">{{ item.matName }}</td>
              <td width="70">{{ item.country }}</td>
              <td width="120">{{ item.matQty }}</td>
              <td width="120">{{ item.finishQty }}</td>
              <td width="120">{{ item.matWeight }}</td>
              <td width="120">{{ item.finishWeight }}</td>
            </tr>
            </tbody>
          </table>
          <div style="margin-left: 445px; margin-top: 20px" class="display-flex">
            <div>分色时间：</div>
            <div style="width: 90px;padding-top: 1px">{{ handleDate(dateFinish) }}</div>
            <div style="margin-left: 120px">客服制单：</div>
            <div style="width: 60px;padding-top: 1px">{{ createdName }}</div>
          </div>
          <div style="width: 237px;height: 213px;margin-left: 660px;margin-top: 20px">
            <img :src="require('./bottom.png')" style="width: 100%; height: 100%"/>
          </div>
        </div>
      </div>
    </template>
  </default-page-box>
</template>

<script>
import util from '@/libs/handleUtil';
import timeUtil from '@/libs/timeUtil';
import DefaultPageBox from '@/components/page/default-page-box/index';

export default {
  components: {
    DefaultPageBox
  },
  name: 'separate-order-print',
  props: {
    selectData: {
      Array,
      default: () => []
    },
    printInfo: {
      Object
    },
    orderNum: {
      type:String,
      default: ''
    }
  },
  data() {
    return {
      ownerName: '',
      changeTypeList: [],
      orderNo: '',
      createdName: '',
      approveName: '',
      tel: '',
      dateFinish: '',
      data: [],
      bottomSrc: './bottom.png',
      imgSrc: './logo.png',
    };
  },
  methods: {
    handleDate(date) {
      return timeUtil.timestampToDate(date);
    },
    printData() {
      let css = `<style media="print">
                  body {
                      font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\\\5FAE\\8F6F\\96C5\\9ED1,Arial,sans-serif;
                      font-size: 12px;
                  }
                 .tablePrint,
                  .tablePrint tr th,
                  .tablePrint tr td {
                    padding: 5px 2px;
                    border: 2px solid #8a8e8e;
                  }


                  .tablePrint thead tr {
                    font-weight: normal;
                  }

                   .tablePrint thead tr th {
                       padding: 8px 2px;
                       font-weight: normal;
                        color: #000;
                  }

                  .tablePrint {
                    width: 880px;
                    margin-top: 20px;
                    text-align: center;
                    border-collapse: collapse;
                    padding: 2px;
                    font-size: 14px;
                  }

                  .page {
                          box-sizing: border-box;
                            padding: 15mm;
                            width: 260mm;
                            height: 297mm;
                            background: #ffffff;
                            font-size: 13px;
                            color: #000000;
                  }

                  .title {
                      text-align: center;
                      font-size : 25px;
                  }
                  .desc {
                      text-align: center;
                      font-size: 15px;
                  }
                  .print-form-label {
                      line-height: 24px;
                      text-align: right;
                  }
                   .footer {
                      text-align: center;
                      font-size: 18px;
                      font-weight: 400;
                      margin-top: 150px;
                      padding-left: 270px;
                  }
                  .input-border {
                    border: none;
                    border-bottom: 1px solid #3b3b3b
                  }
                  .margin-left-5 {
                    margin-left: 5px;
                  }
                    .display-flex {
    display: flex;
    font-size: 14px;
    div {
      word-wrap: break-word;
      word-break: break-all;
    }
  }
                 @page {
                      size: 210mm 297mm;
                      margin: 0mm;
                      padding: 0mm;
                      box-sizing: border-box;
                 }
            </style>`;
      this.$nextTick(function () {
        // const No = this.printRecord.blNo || this.printRecord.orderNo;
        // const title = No + '费用确认';
        const title = '库内分色回执单';
        util.printPage('printPage', css, title);
      });
    },
    exitPage() {
      this.$router.push({
        path: 'cargoTransform'
      });
    },
    onPrint() {
      this.orderNo = this.orderNum
      // this.ownerName = this.selectData[0].ownerName;
      // this.orderNo = this.selectData[0].orderNum;
      // this.createdName = this.selectData[0].name;
      // this.approveName = '';
      // this.tel = this.selectData[0].mobile;
      // this.data = this.selectData;
      // let body = {
      //   outPlanOrderNum: "",
      //   orderNum: this.selectData[0].orderNum
      // }
      let tableData = [];
      this.createdName = this.printInfo.userCrt
      this.ownerName = this.printInfo.customerName
      this.dateFinish = this.printInfo.dateFinish
      this.printInfo.separationOrderParentList.map( item=> {
        item.separationOrderChildList.map( it=> {
          it.orgMatName = item.matName
          tableData.push(it)
        })
      })
      tableData.map( (item, index)=> {
        item.id = index + 1
      })
      this.data = tableData
      this.$forceUpdate()
      this.printData();
    },
  },
  mounted() {

  }
};
</script>

<style scoped>

</style>
